<!--
 * @Description: 
 * @Author: Rabbiter
 * @Date: 2023-01-14 20:02:29
-->
<template>
    <div>
        <el-card class="date-picker-card" shadow="hover" style="border-radius: 8px; padding: 20px;">
            <div class="header-container" style="display: flex; align-items: center; margin-bottom: 20px;">
                <i class="iconfont icon-r-list" style="margin-right: 10px; font-size: 28px; color: #6c757d;"></i>
                <span style="font-size: 20px; font-weight: bold; color: #333;">请选择值班日期：</span>
            </div>

            <ul class="dateUl" style="display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none;">
                <li v-for="monthDay in monthDays" :key="monthDay"
                    style="flex: 1 0 20%; min-width: 120px; text-align: center;">
                    <el-button type="primary"
                        style="width: 100%; font-size: 18px; padding: 10px; background-color: #8f9b9e; border-color: #8f9b9e; transition: all 0.3s ease;"
                        @click="dateClick(monthDay)">
                        <i class="iconfont icon-r-paper" style="font-size: 24px; margin-right: 8px;"></i>
                        {{ monthDay }}
                    </el-button>
                </li>
            </ul>

            <div class="router-view" style="margin-top: 20px;">
                <router-view></router-view>
            </div>
        </el-card>
    </div>
</template>
<script>
import { getActivePath, setActivePath } from "@/utils/storage.js";
import { toLoad } from "@/utils/initialize.js";
const ARRANGEDATE = "arrangeDate";
export default {
    name: "ArrangeIndex",
    data() {
        return {
            monthDays: [],
            monthDay: "",
            activePath: "",
        };
    },

    methods: {
        //日历点击
        dateClick(monthDay) {
            console.log(monthDay);

            const nowDate = new Date();
            let year = nowDate.getFullYear();
            let dateTime = year + "-" + monthDay;
            sessionStorage.setItem(ARRANGEDATE, dateTime);

            this.activePath = "sectionIndex";
            setActivePath("sectionIndex");
            if (this.$route.path !== "/sectionIndex")
                this.$router.push("sectionIndex");
        },
        //获取当天及后7天的日期星期
        nowDay(num) {
            var nowDate = new Date();
            nowDate.setDate(nowDate.getDate() + num);
            var month = nowDate.getMonth() + 1;
            var date = nowDate.getDate();
            if (date < 10) {
                date = "0" + date;
            }
            if (month < 10) {
                month = "0" + month;
            }
            var time = month + "-" + date;
            this.monthDays.push(time);
        },
    },
    mounted() {
        toLoad();
    },
    created() {
        //获取当天的后7天
        for (var i = 0; i < 25; i++) {
            this.nowDay(i);
            //  获取激活路径
            this.activePath = getActivePath();
        }
    },
};
</script>
<style scoped lang="scss">
.disabled {
    background-color: #0e0d0d;
    border-color: #050505;
    color: black;
    cursor: not-allowed; // 鼠标变化
    pointer-events: none;
}

.router-view {
    margin-top: 20px;
}

.sectionUl li {
    display: inline;
    padding: 60px;
}

.dateUl li {
    display: inline;
    //margin: 5px;
    padding: 1px;
}

.date-picker-card {
    background-color: #f4f6f9;
    /* 柔和的浅灰色背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.header-container {
    font-family: 'Arial', sans-serif;
    color: #333;
}

.dateUl li {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dateUl li:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.el-button {
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
}

.el-button:hover {
    background-color: #a1b0b5;
    /* 更柔和的蓝灰色 */
    border-color: #a1b0b5;
}
</style>